<template>
  <div class="comment-item">
    <div class="__avatar">
      <img :src="getAvatar" alt="name">
    </div>
      <el-card :body-style="{ padding: '12px 18px' }">
        <div slot="header">
          <span class="name">{{ name }} </span>的留言：
        </div>
        {{ comment }}
      </el-card>
    </div>
</template>

<script>
import { makeHashAvatar } from "@/utils/hashAvatar.js";
export default {
  props: {
    name: String,
    comment: String
  },
  computed: {
    getAvatar() {
      return makeHashAvatar(this.name, 64);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-card {
  max-width: 950px;
}
.name {
  font-weight: bold;
}
.comment-item {
  display: flex;
  flex-wrap: nowrap;

  width: 100%;
  max-width: 1080px;
  box-sizing: border-box;
  padding: 18px;

  .__avatar {
    width: 64px;
    min-width: 64px;
    border-radius: 5px;
    margin-right: 25px;

    img {
      width: 100%;
    }
  }
}
@media (orientation: portrait) {
  .comment-item {
    padding-top: 7.5px;
    padding-bottom: 7.5px;
  }
  .comment-item .__avatar {
    width: 40px;
    min-width: 40px;
    margin-right: 15px;
  }
}
</style>
